<template>
    <div class="shopEdit">
        <!-- 标头 -->
        <div style="background-color: rgb(255,255,255);">
            <TopList></TopList>
        </div>
        <!-- 地址栏 -->
        <div>
            <AddressList></AddressList>
        </div>
        <!-- 优惠卷 -->
        <div  class="coupon">
        <van-coupon-cell
            class="coupon_cell"
           :coupons:any="coupons"
           :chosen-coupon="chosenCoupon"
           @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model:show="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px;"
        >
          <van-coupon-list
            :coupons:any="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>    
        </div>
        <!-- 列表 -->
        <van-cell-group class="cell_group">
            <van-cell title="商品合计" value="￥1257.00" />
            <van-cell title="邮费" value="￥8" />
            <van-cell title="活动优惠" value="-￥570.00" />
            <van-cell title="优惠卷" value="￥0.00" />
            <van-cell title="我要开发票" is-link to="settlement"></van-cell>
        </van-cell-group>
        <!-- 包裹 -->
        <van-cell title="包裹1" value="支付后，预计48小时内发货" />
        <van-cell>
            <van-swipe-cell class="box">
                 <van-card
                class="shopcart"
                num="2"
                price="59.00"
                title="手机电脑轻松扩容，双口高速U盘"
                thumb="https://yanxuan-item.nosdn.127.net/93132226c978004d3784ad0f9d2ffbdb.png"
              >
                <template #tags>
                  <van-tag color="rgb(244, 244, 244)" text-color="rgb(127, 127, 127)" round  type="primary">
                    太空阴-双口64G
                  </van-tag>
                </template>
                <template #footer>
            
                </template>
              </van-card> 
                
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" />
                </template>
              </van-swipe-cell>
        </van-cell>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AddressList from './components/AddressList/index.vue';
const disabledCoupons = ref<any>()
const coupon = {
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = (code) => {
    coupons.value.push(coupon);
};
</script>

<style scoped>
.shopEdit{
    height: 100%;
    background-color: rgb(244, 244, 244);
}
.coupon{
    display: flex;
    margin: 10px 0;
   
}
.coupon_cell{
    padding: 15px;
}
.cell_group{
    margin-bottom: 10px;
}
.box{
    margin: 0 12px;
}
.shopcart{
      background-color: rgb(255,255,255);
      border-radius:10px;
      margin: 0;
      padding:8px 16px 8px 0 ;
}
.goods-card {
      margin: 0;
    }
  
.delete-button {
      height: 100%;
}
</style>